<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>

<table id="user_able" lay-filter="user_able"></table>

<script src="/layui/layui.js"></script>
<script>
    layui.use(
        function () {
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.from;
            var laydate = layui.laydate;
            var $ = layui.$;


            //第一个实例
            table.render({
                elem: '#user_able'
                // , height: 312
                , url: '/user/getAllUsers' //数据接口
                , page: true //开启分页
                , cols: [[ //表头
                    {type: 'checkbox',fixed: 'left'},
                    {field: 'id', title: 'ID', width: 80}
                    , {field: 'real_NAME', title: '名字', width: 200}
                    , {field: 'email', title: '邮箱', width: 200}
                    , {field: 'password', title: '密码', width: 200}
                    , {field: 'status', title: '状态', width: 80,templet:function (d) {
                        return d.status == 1 ? "正常" : "异常";

                        }
                    }
                    , {field: 'imageUrl', title: '头像文件',}
                    ,{field:'operate', title: '操作',toolbar: '#user-edit-bar',width:180}
                ]]
                ,toolbar:'#toolbarDemo'
            });
            //头工具栏事件
            table.on('toolbar(user_able)',function (obj) {
                switch (obj.event){
                    case 'addUser':
                        openEditWindow(null);
                        console.log("addUser")
                        break;
                    case 'deleteUser':
                        console.log("deleteUser")
                        var data = table.checkStatus('user_able').data;
                        if (data.length > 0) {
                            layer.confirm('真的删除行么', function (index) {
                                var param = ""
                                $.each(data, function (i, obj) {
                                    param += "&ids=" + obj.id
                                })
                                $.ajax({
                                    url: '/user/del',
                                    data: param,
                                    method: 'post',
                                    success: function (result) {
                                        if (result.status) {
                                            table.reload('test', {});
                                        } else {
                                            alert(result.message)
                                        }
                                        layer.close(index);
                                    }
                                })
                            });
                        }
                        break;
                }
            })

            //封装好的弹出窗口函数
            function openEditWindow(data) {
                layer.open({
                    type: 1,
                    content: data == null ? $('#user-add-layer').html():$('#user-edit-layer').html(),
                    title: '编辑'
                    , area: ['500px', '400px'],
                    btn: ['提交', '取消'] //可以无限个按钮
                    , yes: function (index, layero) {
                        layer.load();
                        console.log($("#user-add-form").serialize());
                        $.ajax({
                            url: "/user/" + (data == null ? 'add' : 'update'),
                            //  url: '/sys/customer/update',
                            data: data == null ?$("#user-add-form").serialize():$("#user-edit-form").serialize(),
                            method: 'post',
                            success: function (result) {
                                if (result.status) {
                                    table.reload('user_able', {});
                                    layer.close(index);
                                } else {
                                    alert(result.message)
                                }
                                layer.closeAll('loading');
                            }
                        });
                    }, success: function (layero, index) {
                        form.render();
                        //日期
                        laydate.render({
                            elem: '#birthday'
                        });
                        laydate.render({
                            elem: '#registTime'
                        });
                        laydate.render({
                            elem: '#birthday1'
                        });
                        laydate.render({
                            elem: '#registTime1'
                        });
                        // 为编辑模式填充数据
                        if (data != null) {
                            form.val("user-edit-form", data);
                        }
                    }
                });
            }

            //监听行工具事件
            table.on('tool(user_able)', function (obj) {
                var data = obj.data;
                switch (obj.event) {
                    case 'edit-user': {
                        openEditWindow(data);
                        break;
                    }

                }
            });

        }

    );
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addUser"><i class="layui-icon">&#xe654;</i>增加</button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteUser"><i class="layui-icon">&#xe640;</i>删除</button>
    </div>
</script>
<!-- 增加-->
<script type="text/html" id="user-add-layer">
    <form id="user-add-form" style="width: 80%" class="layui-form" lay-filter="user-add-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男" checked="">
                <input type="radio" name="sex" value="2" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-block">
                <input type="text" name="birthday"  id="birthday" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">注册日期</label>
            <div class="layui-input-block">
                <input type="text" name="registTime" id="registTime" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </form>
</script>

<!-- 修改-->
<script type="text/html" id="user-edit-layer">
    <form id="user-edit-form" style="width: 80%" class="layui-form" lay-filter="user-edit-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男" checked="">
                <input type="radio" name="sex" value="2" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-block">
                <input type="text" name="birthday"  id="birthday1" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">注册日期</label>
            <div class="layui-input-block">
                <input type="text" name="registTime" id="registTime1" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

    </form>
</script>
<script type="text/html" id="user-edit-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit-user">编辑</a>
</script>
</body>
</html>